<template>
    <div class="pd-30">
        <div class="flex">
            <div class=" center">
                <p>教师名：</p>
                <el-input class="w-280" v-model="input" placeholder="请输入"></el-input>
            </div>
            <!-- <div class=" center">
                <p>地址：</p>
                <el-input class="w-280" v-model="input1" placeholder="请输入"></el-input>
            </div>
            <div class=" center">
                <p>手机号：</p>
                <el-input class="w-280" v-model="input2" placeholder="请输入手机号"></el-input>
            </div> -->
            <!-- <div class=" center">
                <p>性别：</p>
                <el-select class="w-280" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div> -->
            <div class=" center">
                <p>进件：</p>
                <el-select class="w-280" v-model="value1" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="flex">
                <el-button class="w-100" @click="chongzhi">重置</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                <!-- <div class="w-30"></div> -->
                <!-- <el-button class="w-100" type="primary" @click="addUser">添加</el-button> -->
            </div>
        </div>
        <div class="flex mt-10" v-if="false">
            <div class="flex">
                <!-- <div class=" center">
                    <p class="mr-15">区域：</p>
                    <el-select class="w-280" v-model="value1" placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div> -->
                <!-- <el-input v-if="value1 != 1" class="w-280 ml-194" v-model="input"
                    :placeholder="`请输入${options1[value1 - 1].label}名称`"></el-input> -->
            </div>
            <div class="flex">
                <el-button class="w-100">重置</el-button>
                <div class="w-30"></div>
                <el-button class="w-100" type="primary" plain @click="getUserList">搜索</el-button>
                <!-- <div class="w-30"></div> -->
                <!-- <el-button class="w-100" type="primary" @click="addUser">添加</el-button> -->
            </div>
        </div>
        <div class="h-30"></div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="pic" label="头像">
                <template #default="{ row }">
                    <img :src="row.pic" class="w-50 h-50" style="object-fit: cover;" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="教师姓名">
            </el-table-column>
            <!-- <el-table-column prop="address" label="地址">
            </el-table-column> -->
            <el-table-column prop="gender" label="性别">
            </el-table-column>
            <el-table-column prop="xueLi" label="学历">
            </el-table-column>
            <el-table-column prop="birthday" label="生日">
            </el-table-column>
            <el-table-column prop="status" label="审核状态">
                <template #default="{ row }">
                    <p v-if="row.shenHeStatus == 0">审核中</p>
                    <p v-if="row.shenHeStatus == 1">通过</p>
                    <p v-if="row.shenHeStatus == 2">拒绝</p>
                </template>
            </el-table-column>
            <el-table-column prop="submitTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="btn(0)">进件</el-button>
                    <el-button size="mini" type="primary" @click="btn(1)">资质上传</el-button> -->
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="mini" type="success">设置上级</el-button> -->
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex mt-20">
            <div></div>
            <el-pagination :current-page="page" background layout="prev, pager, next" :total="total" @current-change="sizeChange">
            </el-pagination>
        </div>


        <el-dialog :visible.sync="show" width="38%" :show-close="false">
            <span slot="title" class="dialog-footer">
                <h4 class="text-center">编辑</h4>
            </span>
            <div class="plr-30 scroll">  
                <div class="flex_l">
                    <div class="w-100">姓名：</div>
                    <el-input class="w-350 ml-20" v-model="form.name" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">手机号：</div>
                    <el-input class="w-350 ml-20" v-model="form.phone" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">交付中心：</div>
                    <el-select filterable  class="w-350 ml-20" v-model="form.jiaoFuZhongXinId" placeholder="请选择" @change="changeJfzx">
                        <el-option v-for="item in jfzxList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">账户余额：</div>
                    <el-input class="w-350 ml-20" v-model="form.yuE" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">子商户号：</div>
                    <el-input class="w-350 ml-20" v-model="form.payAccount" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">性别：</div>
                    <el-select class="w-350 ml-20" v-model="form.gender" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">生日：</div>
                    <el-date-picker v-model="form.birthday" class="w-350 ml-20" type="datetime" placeholder="选择生日">
                    </el-date-picker>
                </div>
                <!-- <div class="flex_l mt-20">
                    <div class="w-100">邮箱：</div>
                    <el-input class="w-350 ml-20" v-model="form.mail" placeholder="请输入"></el-input>
                </div> -->
                <!-- <div class="flex_l mt-20">
                    <div class="w-100">地址：</div>
                    <el-input class="w-350 ml-20" v-model="form.address" placeholder="请输入"></el-input>
                </div> -->
                <div class="flex_l mt-20">
                    <div class="w-100">身份证号：</div>
                    <el-input class="w-350 ml-20" v-model="form.shenFenZhengHao" placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">身份证正面：</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card" name="shenFenZhengZhengMian"
                        :on-success="handlePictureCardPreview('shenFenZhengZhengMian')"
                        :on-remove="handleRemove('shenFenZhengZhengMian')" :file-list="fan" :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <a :href="form.shenFenZhengZhengMian" class="blue ml-30" v-if="form.shenFenZhengZhengMian">下载</a>
                </div>

                <div class="flex_l mt-20">
                    <div class="w-100">身份证反面：</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card"
                        :on-success="handlePictureCardPreview('shenFenZhengFanMian')"
                        :on-remove="handleRemove('shenFenZhengFanMian')" :file-list="zheng" :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <a :href="form.shenFenZhengFanMian" class="blue ml-30"
                        v-if="form.shenFenZhengFanMian">下载</a>
                </div>

                <!-- <div class="flex_l mt-20">
                    <div class="w-100">营业执照：</div>
                    <el-upload class="ml-20" :action="upUrl" list-type="picture-card"
                        :on-success="handlePictureCardPreview('yingYeZhiZhao')" :on-remove="handleRemove('yingYeZhiZhao')"
                        :file-list="yingye" :limit="1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <a :href="form.yingYeZhiZhao" class="blue ml-30" v-if="form.yingYeZhiZhao">下载</a>
                </div> -->
                <div class="flex_l mt-20">
                    <div class="w-100">个人简介：</div>
                    <el-input class="w-350 ml-20" size="" v-model="form.info" type="textarea"
                        placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">备注：</div>
                    <el-input class="w-350 ml-20" size="" v-model="form.beiZhu" type="textarea"
                        placeholder="请输入"></el-input>
                </div>
                <div class="flex_l mt-20">
                    <div class="w-100">审核状态：</div>
                    <!-- <el-radio-group v-model="form.shenHeStatus" class=" ml-20">
                        <el-radio :label="0">审核中</el-radio>
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">拒绝</el-radio>
                    </el-radio-group> -->
                    <div class="ml-20">
                        <el-radio v-model="form.shenHeStatus" label="0">审核中</el-radio>
                        <el-radio v-model="form.shenHeStatus" label="1">通过</el-radio>
                        <el-radio v-model="form.shenHeStatus" label="2">拒绝</el-radio>
                    </div>
                </div>
                <div class="flex_l mt-20" v-if="form.shenHeStatus == 2">
                    <div class="w-100">拒绝原因：</div>
                    <el-input class="w-350 ml-20" v-model="form.shenHeReason" placeholder="请输入"></el-input>
                </div>
            </div>



            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { ccusUserTeacherList, cusUserTeacherEdit, removecuscusUserTeacher,getcusJiaofuzhongxin } from '@/api/hhr.js'
export default {
    name: "Teacher",
    data() {
        return {
            show: false,
            options: [{
                value: '',
                label: '全部'
            }, {
                value: '1',
                label: '男'
            }, {
                value: '2',
                label: '女'
            }],
            options1: [
                {
                    value: '2',
                    label: '全部'
                }, {
                    value: '1',
                    label: '未进件'
                }
            ],
            value: '',
            value1: '2',
            input: '',
            input1: '',
            input2: '',
            tableData: [],
            page: 1,
            total: 0,
            form: {
                area:'',
                beiZhu:'',
                birthday:'',
                city:'',
                gender:'1',
                id:'',
                info:'',
                jiaoFuZhongXinId:'',
                jiaoFuZhongXinName:'',
                lockYuE:'',
                name:'',
                openId:'',
                pic:'',
                province:'',
                shenFenZhengFanMian:'',
                shenFenZhengZhengMian:'',
                shengHuoZhao:'',
                shenHeReason:'',
                shenHeStatus:'',
                shiMingFlag:'',
                shouYiFlag:'',
                status:'',
                submitShenheTime:'',
                xueLi:'',
                xueLiZhengShu:'',
                xunzhangDengJi:'',
                yuE:'',
                payAccount:''
            },
            dialogImageUrl: '',
            type: '',//1新增 2修改
            upUrl: '',
            zheng: [],
            fan: [],
            yingye: [],
            jfzxList:[]
        }
    },
    mounted() {
        this.getUserList()
        this.upUrl = this.$baseUrl + '/apis/000/002-uploadFileForJson'
        this.getJfzx()
    },
    methods: {
        getJfzx(){
            getcusJiaofuzhongxin({
                pageNum: 1,
                pageSize: 99999,
            }).then(res=>{
                this.jfzxList = res.rows
            })
        },
        btn(index) {
            var arr = [
                'http://121.199.17.238:8010/merchant_entry/entry/toEntry.action',
                'http://121.199.17.238:8010/merchant_entry/entry/toUpload.action',
                'http://121.199.17.238:8010/merchant_entry/entry/toOpenProduct.action',
                'https://panxueyou.oss-cn-hangzhou.aliyuncs.com/static/renZhengMa.png',
                'http://121.199.17.238:8010/merchant_entry/entry/toWxApply.action'
            ]
            window.open(arr[index], '_blank');

        },
        sizeChange(e) {
            this.page = e
            this.getUserList()
        },
        addUser() {
            for (var i in this.form) {
                if (i != 'platform' && i != 'thirdId' && i != 'thirdName' && i != 'roles') {
                    this.form[i] = ''
                }
            }
            this.show = true
            this.type = 1
        },
        changeJfzx(e){
            this.form.jiaoFuZhongXinName = this.jfzxList.filter(item=> item.id == e)[0].name
        },
        submit() {
            cusUserTeacherEdit(this.form).then(res => {
                if (res.code == 0) {
                    this.show = false
                    this.getUserList()
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error(res.msg || '失败');
                }
            })
        },
        chongzhi(){
            this.page = 1
            this.input = ''
            this.value1 = '2'
            this.getUserList()
        },
        getUserList() {
            ccusUserTeacherList({
                pageNum: this.page,
                pageSize: 10,
                jinJianQueryFlag:this.value1,
                name: this.input
            }).then(res => {
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleEdit(e, type) {
            for (var i in this.form) {
                this.form[i] = type[i]
            }
            this.show = true,
            this.zheng = [{ name: '1', url: type.shenFenZhengZhengMian }]
            this.fan = [{ name: '1', url: type.shenFenZhengFanMian }]
            // this.yingye = [{ name: '1', url: type.yingYeZhiZhao }]
        },
        handleDelete(e, type) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                removecuscusUserTeacher({ ids: type.id }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getUserList()
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleRemove(fieldName) {
            return (file, fileList) => {
                console.log('文件被删除:', file);
                console.log('当前文件列表:', fileList);
                // 当文件被删除时，清除 form 对应字段的值
                this.form[fieldName] = '';
            };
        },
        handlePictureCardPreview(fieldName, response, file, fileList) {
            // console.log(fieldName,response,file,fileList)
            // 假设服务器返回的数据中包含图片的 URL
            if (response && response.fileUrl) {
                // 将返回的图片地址保存到 form 对应的字段
                this.form[fieldName] = response.list[0].url
            }
            // console.log(this.form[fieldName])
        },
    }
}
</script>